<template>
  <base-breadcrumb>
    <a-spin :tip="tips" :spinning="spinning">
    <searchData :searchData="searchArr" @search="search"></searchData>
    <a-card :bordered="false" style="over-flow:scroll">
      <div>
        <a-row>
          <a-col :md="24" :sm="24">
            <div class="table-operator">
              <a-button type="primary"  @click="goAdd()" v-btnPermission="[{code:'seex_pm_019_add_01',ident:'prma_seex'},{code:'buco_pm_019_add_01',ident:'prma_buco'}]">新增评价表</a-button>
              <a-button  @click="handleDel" v-btnPermission="[{code:'seex_pm_019_del_04',ident:'prma_seex'},{code:'buco_pm_019_del_04',ident:'prma_buco'}]">删除</a-button>
            </div>
              <div class="pub-table-select-count">
                <a-icon type="info-circle" theme="twoTone"/>
                <span> 评价表总计<span class="totalNum">{{ total.total }}项</span> </span> |
                <span> 可用总计 <span class="totalNum">{{ total.enable }}</span> 项  </span> |
                <span> 不可用总计 <span class="totalNum">{{ total.notEnable }}</span> 项  </span> |
                <span> 已选择 <span class="totalNum">{{ selectedRows.length }}</span> 项  </span> 
              </div>
            <list-table
                    ref="table"
                    size="default"
                    :rowKey="record=>record.id"
                    :columns="columns"
                    :request="loadData"
                    :alert="true"
                    show-size-changer
                    show-quick-jumper
                    :rowSelection="rowSelection"
                    showPagination="auto">
              <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
              <span slot="action" slot-scope="text, record">
                <template>
                <a @click="handleSub(record,'view')" v-btnPermission="[{code:'seex_pm_019_loo_02',ident:'prma_seex'},{code:'buco_pm_019_loo_02',ident:'prma_buco'}]">查看</a>
                  <a-divider type="vertical"  v-btnPermission="[{code:'seex_pm_019_edi_03',ident:'prma_seex'},{code:'buco_pm_019_edi_03',ident:'prma_buco'}]" />
                <a @click="handleEdit(record)" v-btnPermission="[{code:'seex_pm_019_edi_03',ident:'prma_seex'},{code:'buco_pm_019_edi_03',ident:'prma_buco'}]">编辑</a>
                </template>
              </span>
            </list-table>
          </a-col>
        </a-row>
      </div>
    </a-card>
    <a-modal
            title="新增评价表"
            :visible="visible"
            destroyOnClose
            :confirm-loading="confirmLoading"
            width="800px"
            @ok="handleOk"
            @cancel="handleCancel">
      <a-form-model 
        ref="ruleForm2"
        :model="form"
        :label-col="{span: 6 }"
        :wrapper-col="{span: 18 }"
        :rules="rules"
         >
        <a-row>
          <a-col :md="12" :sm="12">
            <a-form-model-item
                    label="评价表名称"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }" prop="formName">
              <!--<BaseInput v-model="form.formName"-->
                       <!--placeholder="请输入" />-->
              <a-select v-model="form.formName" @change="handleFormNameChange" mode="combobox" placeholder="请输入或者选择评价表名称">
                <a-select-option value="分包商月度考核评价表">分包商月度考核评价表</a-select-option>
                <a-select-option value="分包商季度考核评价表">分包商季度考核评价表</a-select-option>
                <a-select-option value="设计策划编制评审表">设计策划编制评审表</a-select-option>
                <a-select-option value="设计效能考核表">设计效能考核表</a-select-option>
                <a-select-option value="设计资源考核评价表">设计资源考核评价表</a-select-option>
                <a-select-option value="专业工程施工方案讲解评价表">专业工程施工方案讲解评价表</a-select-option>
                <a-select-option value="施工组织设计(方案)编制评价表">施工组织设计(方案)编制评价表</a-select-option>
                <a-select-option value="回填土专项治理查评分表">回填土专项治理查评分表</a-select-option>
                <a-select-option value="工程渗漏专项治理查评分表">工程渗漏专项治理查评分表</a-select-option>
                <a-select-option value="混凝土观感专项治理查评分表">混凝土观感专项治理查评分表</a-select-option>
                <a-select-option value="专业分包方案讲评评分表">专业分包方案讲评评分表</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-form-model-item
                    label="状态"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }" prop="enable">
              <a-select v-model="form.enable" placeholder="请选择">
                <a-select-option value=1>可用</a-select-option>
                <a-select-option value=0>不可用</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
    </a-spin>
  </base-breadcrumb>
</template>

<script>
  import { STable, Ellipsis } from '@/components'
  import { getEvaluateList  ,addEvaluateList,getEvaluateListTotal,addFormTemplateHeader,delEvaluates} from '@/api/evaluate'
  import { status } from '@/components/constant'

  const columns = [
    {
      title: '序号',
      width:65,
      scopedSlots: { customRender: 'serial' }
    },
    {
      title: '表格名称',
      width:100,
      dataIndex: 'name'
    },
    {
      title: '评分项个数',
      width:100,
      dataIndex: 'count',

    },
    {
      title: '评分表总分',
      width:100,
      dataIndex: 'totalScore',

    },
    {
      title: '编制人',
      width:80,
      dataIndex: 'prepared',
    },
    {
      title: '编制时间',
      width:100,
      dataIndex: 'time',
    },
    {
      title: '状态 ',
      width:60,
      dataIndex: 'status',
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: 150,
      scopedSlots: { customRender: 'action' }
    }
  ]
  const searchArr =[
    // 搜索框
    {
      name: '评价表名称',
      value: 'formName',
      type: 'input'
    },
    {
      name: '状态',
      value: 'enable',
      type: 'select',
      data:[
        {
          value: 'true',
          label: '可用'
        },
        {
          value: 'false',
          label: '不可用'
        }
      ]
    },
  ]
  export default {
    name:'a'+Date.now(),
    components:{
      STable
    },
    data(){
      this.columns = columns
      this.status = status
      this.searchArr = searchArr
      return{
        cacheSelecRows: [],
        evaluateNames:['分包商月度考核评价表','分包商季度考核评价表','设计策划编制评审表','设计效能考核表',
          '设计资源考核评价表','专业工程施工方案讲解评价表','施工组织设计(方案)编制评价表','回填土专项治理查评分表',
          '工程渗漏专项治理查评分表','混凝土观感专项治理查评分表', '专业分包方案讲评评分表'],
        tips:'',
        spinning: false,
         //  评价表表头
        headerData:{
        "formId": 0,
        "items": [
        {
          "code": "1",
          "inputType": "INPUT",
          "name": "考核名称",
          "sort": 1
        },
        {
          "code": "2",
          "inputType": "INPUT",
          "name": "考核分类",
          "sort": 2
        },
        {
          "code": "3",
          "inputType": "SELECT",
          "name": "考核类型",
          "sort": 3
        },
        {
          "code": "4",
          "inputType": "NUMBER",
          "name": "考核评分",
          "sort": 4
        },
        {
          "code": "5",
          "inputType": "SELECT",
          "name": "考核人员/部门",
          "sort": 5
        },
        {
          "code": "6",
          "inputType": "TEXT_AREA",
          "name": "主要检查内容",
          "sort": 6
        },
        {
          "code": "7",
          "inputType": "TEXT_AREA",
          "name": "扣分标准",
          "sort": 7
        },
        {
          "code": "8",
          "inputType": "SELECT",
          "name": "状态",
          "sort": 8
        }
      ]
      },
      headerDataQuality:{
        "formId": 0,
        "items": [
          {
            "code": "1",
            "inputType": "INPUT",
            "name": "分部工程",
            "sort": 1
          },
          {
            "code": "2",
            "inputType": "INPUT",
            "name": "检查项",
            "sort": 2
          },
          {
            "code": "4",
            "inputType": "NUMBER",
            "name": "考核评分",
            "sort": 3
          },
          {
            "code": "8",
            "inputType": "SELECT",
            "name": "状态",
            "sort": 4
          },
          {
            "code": "7",
            "inputType": "TEXT_AREA",
            "name": "扣分标准",
            "sort": 5
          },
          
        ]
      },

        // 查询参数
        queryParam: {
          code:1
        },
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          const requestParameters = Object.assign({}, parameter, this.queryParam)
          return getEvaluateList(requestParameters)
            .then(res => {
              return res
            })
        },
        rules:{
          formName:[{required: true, message: '请选择评价表名称', trigger: 'blur'}],
          enable:[{required: true, message: '请选择状态', trigger: 'change'}],
        },
        selectedRowKeys:[],
        selectedRows:[],
        ids:[],
        names:[],
        confirmLoading:false,
        total:{},
        form:{
          formName:''
        },
        visible:false,
        maxSelectInputLength:30
      }
    },
    computed: {
      rowSelection() {
        return {
          selectedRowKeys: this.selectedRowKeys,
          selectedRows: this.selectedRows,   // 当前行所有数据
          onChange: this.onSelectChange,
          getCheckboxProps: record => ({
            props: {
              // 禁止选中
              disabled:this.evaluateNames.includes(record.name) ? true:false,
            },
          }),
        }
      }
    },
    created() {
      this.getEvaluateListTotal()
    },
    methods:{
      // 批量删除
      handleDel(){
        let that = this
        if(that.selectedRows.length == 0){
          that.$message.error('请先选择删除的评价表！')
          return
        }
        that.$confirm({
          title: '删除',
          content: '确定删除评价表吗？',
          onOk() {
            delEvaluates({ids:that.ids}).then(res=>{
              if(res.data == 200 || res.data.code == 200){
                that.$message.success('删除成功！')
                that.$refs.table.refresh(true)
                that.getEvaluateListTotal()
                that.selectedRows = []
                that.selectedRowKeys = []
              }
            })
          },
          onCancel() {},
        });
      },
      getEvaluateListTotal(){
        this.queryParam.code = 1
        getEvaluateListTotal(this.queryParam).then((res)=>{
          this.total = res.data
        })
      },
      // 限制输入框输入字数
      handleFormNameChange(val){
        this.form.formName = val.substr(0,this.maxSelectInputLength)
      },
      onSelectChange(selectedRowKeys, selectedRows) {
        const arr2 =  this.setTableListTopNum(this.cacheSelecRows, selectedRowKeys, selectedRows, 'id')
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = arr2
        let arr = []
        arr2.forEach(function(obj,i) {
          arr.push(obj.id)
        })
        this.ids = arr
      },
      search(values){
        this.queryParam = values
        this.queryParam.code = 1
        this.$refs.table.refresh(true)
        this.getEvaluateListTotal()
      },
      goAdd(){
        this.visible = true
        this.form = {}
      },
      handleSub(record,type){
        this.$router.push({
          path:"/project/evalution/details",
          query:{
            id:record.id,
            name:record.name,
            status:record.status,
            type:type
          }
        })
      },
      handleEdit(record){
        this.$router.push({
          path:"/project/evalution/projectEvalutionEditScore",
          query:{
            id:record.id,
            name:record.name,
            status:record.status
          }
        })
      },
      handleOk(){
        let that = this
        that.$refs.ruleForm2.validate((valid, values) => {
          if(!valid) return
          that.visible = false
          if(that.form.enable=='1'){
            that.form.enable=1
          }else{
            that.form.enable=0
          }
          that.form.formTypeCode = 1

          if(that.form.formName.length>30){
            that.$message.error("评价表名称不能超过30个字符！")
            return;
          }

          this.spinning = true
          this.tips = '评价表创建中...'
          addEvaluateList(this.form).then((res)=>{
            try {
              let headerData = {}
              if (this.form.formName.indexOf('质量风险评价') > -1) {
                headerData = this.headerDataQuality
              } else {
                headerData = this.headerData
              }
              headerData.formId = res.data.id
              console.log(headerData)
              if(res.code === 200){
                addFormTemplateHeader(headerData).then(res=>{
                  this.spinning = false
                  this.$message.success("新增成功")
                  this.$refs.table.refresh(true)
                  this.getEvaluateListTotal()
                }).catch(()=>this.spinning=false)
              }
            } catch(e) {
              console.log(e)
            }
            
          }).catch(()=>this.spinning = false)
        })

      },
      handleCancel(){
        this.visible = false
      }
    }
  }
</script>

<style scoped>
  .input{
    width:100%
  }
  .notShow{
    display:none
  }
</style>
